<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<!-- 
     自定义指令总结：
     一、定义语法
     (1)局部指令  
      new Vue({
directives:{指令明：配置对象}
     })


     new  Vue({
         directive{指令明：回调函数}
     })

     (2)全局指令
     Vue.directive(指令明，配置对象)或Vue.directive(指令名，回调函数)
 
 
  二、 配置对象中常用的三个属性
  (1)bind:指令与元素成功绑定时调用
  (2)inserted:指令所在元素被插入页面的时候调用
  (3)update:指令所在模板结构被重新结构时调用
 

  三、备注：
  1、指令定义时不加-v  ,但是使用的时候要加v-
  2、指令名如果是多个单词，要使用kebab-case命名方式，不要使用camelCase命名
    -->

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n的值是：<span v-text="n"></span></h2>
        <h2>放大十倍后的值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr> 姓名：
        <input type="text" v-fbind:value="n">

    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.directive('big', function(element, binding) {
                console.log('big', this); //this指向的是window
                element.innerText = binding.value * 10
            })
            //定义全局指令
        new Vue({
            el: '#root',
            data: {
                name: '张三',
                n: 1
            },
            directives: {
                //big函数什么时候会被调用？
                //指令与元素成功绑定时。指令所在的模板被重新解析时
                //定义局部指令

                // big(element, binding) {
                //     console.log('big', this); //this指向的是window
                //     element.innerText = binding.value * 10
                // },
                fbind: {
                    //指令与元素成功绑定时
                    bind(element, binding) {

                        element.value = binding.vulue

                    },
                    //指令所在元素被插入页面的时候调用
                    inserted(element, binding) {
                        element.focus()
                    },
                    //指令所在的模板被重新解析时
                    update(element, binding) {
                        element.value = binding.value

                    }
                }
            }
        })
    </script>
</body>

</html>